<%--&lt;%&ndash;--%>
<%--  Created by IntelliJ IDEA.--%>
<%--  User: Administrator--%>
<%--  Date: 2022/10/14--%>
<%--  Time: 20:41--%>
<%--  To change this template use File | Settings | File Templates.--%>
<%--&ndash;%&gt;--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻审核</title>
    <!--引入elementui的样式-->
    <!-- 引入外部样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <!-- 引入相关插件，也叫依赖-->
    <!--引入vue的依赖，必须在elementui之前引入vue-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <style>
        #page{
            padding: 2px 500px;
        }

        #newsContent{
            line-height:8;
        }
        #suggestNews{
            line-height:3;
        }
    </style>
</head>
<body>
<div id="app">
    <el-main>
    <%--根据所需要求进行查询--%>
        <el-form :inline="true" :model="newsSeacherForm" class="demo-form-inline">
            <el-form-item label="申报人">
                <el-input v-model="newsSeacherForm.newsAuthor" placeholder="发布者"></el-input>
            </el-form-item>
            <el-form-item label="新闻标题">
                <el-input v-model="newsSeacherForm.newsTitle" placeholder="新闻标题"></el-input>
            </el-form-item>
            <el-form-item label="申报类别">
                <el-select v-model="newsSeacherForm.kindId"  placeholder="新闻类别">
                    <el-option v-for="item in kindData"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"  @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <!--表格部分-->
        <el-table
                :data="tableData"
                border
                style="width:100%">
            <el-table-column
                    prop="id"
                    label="申报编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="newsAuthor"
                    label="申报者"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="newsTitle"
                    label="新闻标题"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="kindId"
                    label="新闻类别">
                <template slot-scope="scope">
                    <span v-if="scope.row.kindId==1">{{scope.row.kind.name}}</span>
                    <span v-if="scope.row.kindId==2">{{scope.row.kind.name}}</span>
                    <span v-if="scope.row.kindId==3">{{scope.row.kind.name}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="newsTime"
                    label="申报时间">
            </el-table-column>
            <el-table-column
                    prop="newsContent"
                    label="新闻内容">
            </el-table-column>
            <el-table-column
                    prop="newsStatus"
                    label="审核状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.newsStatus==0">待审批</span>
                    <span v-if="scope.row.newsStatus==1">审核通过</span>
                    <span v-if="scope.row.newsStatus==3">审核未通过</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!--scope.row 从本行获取数据-->
                    <el-button type="warning"  @click="auditNews(scope.row)">审核新闻</el-button>
                </template>
            </el-table-column>
        </el-table>

        <%--审核新闻弹窗--%>
        <el-dialog
                title="审核内容"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form  label-width="80px" :model="auditForm" ref="auditFormRef">
                    <el-form-item label="申报者:" >{{auditForm.newsAuthor}}</el-form-item>
                    <el-form-item label="新闻标题:">{{auditForm.newsTitle}}</el-form-item>
                <el-form-item label="新闻类别:">{{newsName}}</el-form-item>
                    <el-form-item label="申报时间:">{{auditForm.newsTime}}</el-form-item>
                    <el-form-item label="新闻内容:">
                        <el-input type="textarea"
                                  v-model="auditForm.newsContent"
                                  id="newsContent">
                        </el-input>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                 <el-button type="success" plain  @click="passNews()" >通过</el-button>
                 <el-button type="danger" plain @click="nopassNews()">未通过</el-button>
            </span>
        </el-dialog>

        <%--未通过审核弹窗(给出修改意见)--%>
        <el-dialog
                title="审核意见"
                :visible.sync="dialogVisible1"
                width="30%">
            <el-form  label-width="80px" :model="suggestForm" ref="suggestFormRef">
                <el-form-item label="意见反馈">
                    <el-input type="textarea" v-model="suggestForm.newsReason" id="suggestNews"></el-input>
                </el-form-item>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible1 = false">取 消</el-button>
                 <el-button type="success" plain  @click="suggestSubmit()" >确定</el-button>
            </span>
        </el-dialog>



        <!-- 分页   -->
        <div id="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </el-main>
</div>
</body>
<script>
    var app= new Vue({
        el:"#app",
        data: {
            tableData:[],
            kindData:[],
            //表单搜索对象,定义根据新闻的参数
            newsSeacherForm:{},
            //审核新闻的弹窗的初始值
            dialogVisible: false,
            //定义新闻类别的参数
            newsName:'',
            //审核新闻的表单
            auditForm:{},
            //未通过审核的弹窗的初始值
            dialogVisible1:false,
            //审核意见的表单
            suggestForm:{},
            //当前显示的页码
            currentPage:1,
            //每页显示的条数
            pageSize:5,
            //总条数
            total:0,
            newsStatus:0,
        },
        created(){
            this.initTable();
        },
        methods: {
            //查询按钮
            onSubmit(){
                this.initTable();
                this.newsSeacherForm={};
            },
          // 查询所有内容
            initTable(){
                axios.post("/news/list?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.newsSeacherForm).then(resp=>{
                    // console.log(resp.data.data.list);
                    this.tableData=resp.data.data.list;
                    this.total=resp.data.data.total;
                });
                this.kind();
            },
            //查询新闻类型
            kind(){
                axios.post("/kind/list").then(resp=>{
                    this.kindData=resp.data.data;
                });
            },

            //审核新闻
            auditNews(row){
                //1.显示对话框
                this.dialogVisible = true;
                this.newsName=row.kind.name
                let parse = JSON.parse(JSON.stringify(row));
                //2.绑定表单数据
                this.auditForm=row;
            },

            //审核通过
            passNews(){
                axios.post("/news/updateStatus",this.auditForm).then(resp=>{
                    if(resp.data === 200){
                        // console.log(resp)
                        this.$message.success("审核通过");
                    }
                    this.dialogVisible = false;
                    //刷新页面
                    this.initTable();

                })
            },
            //审核未通过
            nopassNews(){
                this.dialogVisible1 = true;
                // 回显数据
                this.initTable();
            },

            //审核未通过，提交审核建议
            suggestSubmit(){
                this.auditForm.newsReason=this.suggestForm.newsReason
                axios.post("/news/updateAuditStatus",this.auditForm).then(resp=>{
                    if(resp.data === 200){
                        this.$message.success("审核为未通过");
                    }
                    this.dialogVisible1 = false;

                    this.dialogVisible = false;
                    //刷新页面
                    this.initTable();
                })
            },

            //分页
            handleSizeChange(val) {
                this.pageSize= val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },



        }
    })
</script>
</html>